@charset "utf-8";
@import "reset";
@function r($px) {
  @return $px/100 * 1rem;
}
@keyframes le1 {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes le2 {
  0% {
    transform: rotateZ(30deg);
  }
  100% {
    transform: rotateZ(390deg);
  }
}
@keyframes le3 {
  0% {
    transform: rotateZ(60deg);
  }
  100% {
    transform: rotateZ(420deg);
  }
}
@keyframes le4 {
  0% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(450deg);
  }
}
@keyframes le5 {
  0% {
    transform: rotateZ(120deg);
  }
  100% {
    transform: rotateZ(480deg);
  }
}
@keyframes le6 {
  0% {
    transform: rotateZ(150deg);
  }
  100% {
    transform: rotateZ(510deg);
  }
}
@keyframes mouth {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
}
#load,
#sy,
#resul {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  transition: all 2s;
}
#load {
  // display: none;
  background-image: url("../images/load/pre_star.png"),
    url("../images/load/pre_bg.jpg");
  background-size: r(595), cover;
  background-repeat: no-repeat;
  background-position: 100% 100%, center;
  z-index: 9;
  .rw {
    width: r(750);
    height: r(1200);
    position: absolute;
    bottom: r(30);
    display: flex;
    img {
      padding-left: r(42);
      padding-right: r(17);
      width: 100%;
      height: 100%;
      margin: auto;
    }
  }
  .tip {
    position: absolute;
    bottom: 0;
    left: r(200);
    display: flex;
    img {
      width: r(260);
      margin: auto;
    }
  }
  #preText {
    position: absolute;
    font-size: r(30);
    bottom: r(90);
    left: r(12);
    color: white;
  }
}
#sy {
  //display: none;
  z-index: 8;
  position: relative;
  overflow: hidden;
  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    .line {
      width: 0;
      height: 0;
      border-top: 40px solid transparent;
      border-right: r(1000) solid #555555;
      border-left: r(1000) solid #555555;
      border-bottom: 40px solid transparent;
      position: absolute;
      top: -999px;
      left: -999px;
      bottom: -999px;
      right: -999px;
      margin: auto;
    }
    .line1 {
      transform-origin: center;
      animation: le1 3s linear infinite;
    }
    .line2 {
      transform-origin: center;
      animation: le2 3s linear infinite;
    }
    .line3 {
      transform-origin: center;
      animation: le3 3s linear infinite;
    }
    .line4 {
      transform-origin: center;
      animation: le4 3s linear infinite;
    }
    .line5 {
      transform-origin: center;
      animation: le5 3s linear infinite;
    }
    .line6 {
      transform-origin: center;
      animation: le6 3s linear infinite;
    }
  }
  .logo {
    width: 100%;
    position: absolute;
    top: 0;
    text-align: right;
    img {
      height: r(70);
    }
  }
  .mouth {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .mouthimg {
      top: 0;
      left: 0;
      bottom: 0;
      left: 0;
      position: absolute;
      display: flex;
      img {
        width: 95%;
        margin: auto r(30) auto auto;
        animation: mouth 0.5s ease infinite;
      }
    }
    .dog {
      width: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      position: absolute;
      display: flex;
      img {
        width: 30%;
        margin: auto;
      }
    }
  }
  .guess {
    width: 100%;
    position: absolute;
    top: r(107);
    display: flex;
    img {
      height: r(355);
      margin: auto;
    }
  }
  .people {
    width: 100%;
    height: r(520);
    position: absolute;
    bottom: r(120);
    display: flex;
    justify-content: space-between;
    img {
      height: r(500);
      margin: auto;
      &:last-child {
        height: r(550);
      }
    }
  }
  .btn {
    position: absolute;
    left: r(185);
    bottom: r(35);
    //display: flex;
    img {
      width: r(320);
      // width: 100%;
    }
  }
}
.option {
  //  display: none;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 4;
  ul {
    padding-left: r(32);
    padding-right: r(25);
    li {
      width: r(530);
      height: r(110);
      text-align: center;
      &:first-child {
        background: url("../images/file/A.png") no-repeat;
        background-size: cover;
        margin-bottom: r(18);
      }
      &:nth-child(2) {
        background: url("../images/file/B.png") no-repeat;
        background-size: cover;
        margin-bottom: r(18);
      }
      &:last-child {
        background: url("../images/file/C.png") no-repeat;
        background-size: cover;
      }
      p {
        line-height: r(104);
        font-size: r(27);
      }
      img {
        // display: none;
        margin: auto;
        width: r(520);
      }
    }
  }
  .djs {
    text-align: center;
    p {
      width: r(139);
      height: r(133);
      line-height: r(133);
      background: url("../images/file/zm.png");
      background-size: cover;
      font-size: r(35);
    }
    img {
      height: r(222);
    }
  }
}
.tp {
  opacity: 0;
  transition: all 1s;
  width: r(250);
  height: r(100);
  position: absolute;
  bottom: r(400);
  left: r(200);
  margin: auto;
  z-index: 4;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: r(10);
  p {
    line-height: r(100);
    color: white;
    text-align: center;
    font-size: r(40);
  }
}
.main {
  //display: none;
  position: absolute;
  top: 0;
  left: 0;
  .swiper-container {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    #film {
      width: 100vw;
      height: 100vh;
      // display: none;
      background: url("../images/file/bg.jpg") no-repeat;
      background-size: cover;
      .jz {
        position: absolute;
        width: 100%;
        top: r(73);
        img {
          width: r(663);
          animation-iteration-count: infinite;
        }
      }
      .char,
      .char-1 {
        position: absolute;
        top: r(210);
        left: r(66);
        // display: flex;
        width: 100%;
        img {
          width: r(658);
        }
      }
      .char-1 {
        top: r(685);
        left: 0;
        img {
          width: 100%;
        }
      }
    }
    #rock {
      width: 100vw;
      height: 100vh;
      // display: none;
      .bg {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: white;
        .line {
          width: 0;
          height: 0;
          border-top: 40px solid transparent;
          border-right: r(800) solid #555555;
          border-left: r(800) solid #555555;
          border-bottom: 40px solid transparent;
          position: absolute;
          top: -999px;
          left: -999px;
          bottom: -999px;
          right: -999px;
          margin: auto;
        }
        .line1 {
          transform-origin: center;
          animation: le1 3s linear infinite;
        }
        .line2 {
          transform-origin: center;
          animation: le2 3s linear infinite;
        }
        .line3 {
          transform-origin: center;
          animation: le3 3s linear infinite;
        }
        .line4 {
          transform-origin: center;
          animation: le4 3s linear infinite;
        }
        .line5 {
          transform-origin: center;
          animation: le5 3s linear infinite;
        }
        .line6 {
          transform-origin: center;
          animation: le6 3s linear infinite;
        }
      }
      .rac {
        position: absolute;
        width: r(792);
        height: r(535);
        top: r(250);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .dd {
        position: absolute;
        top: 0;
        img {
          width: 100%;
          animation-iteration-count: infinite;
        }
      }
      .rac-1 {
        position: absolute;
        width: r(513);
        height: r(642);
        left: r(125);
        top: r(140);
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    #classic {
      width: 100vw;
      height: 100vh;
      background: url("../images/classic/bg.jpg") no-repeat;
      background-size: cover;
      .floor {
        position: absolute;
        top: r(560);
        img {
          width: 100vw;
        }
      }
      .dd {
        position: absolute;
        top: 0;
        img {
          width: 100vw;
        }
      }
      .lp {
        position: absolute;
        top: r(134);
        img {
          width: 100vw;
        }
      }
      .db {
        position: relative;
        img {
          position: absolute;
          width: r(420);
          &:first-child {
            top: r(336);
            left: 0;
          }
          &:last-child {
            z-index: 5;
            right: 0;
            top: r(426);
          }
        }
      }
      .zr {
        position: relative;
        img {
          position: absolute;
          &:first-child {
            z-index: 3;
            top: r(178);
            width: r(400);
            right: r(70);
          }
          &:last-child {
            top: r(745);
            left: r(70);
            width: r(215);
          }
        }
      }
    }
    #rb {
      width: 100vw;
      height: 100vh;
      //display: none;
      background: url("../images/classic/bg.jpg") no-repeat;
      background-size: cover;
      .dd {
        position: absolute;
        top: 0;
        img {
          width: 100vw;
        }
      }
      .yao {
        position: absolute;
        top: r(115);
        left: r(72);
        img {
          width: r(490);
          animation-iteration-count: infinite;
        }
      }
      .car {
        position: absolute;
        top: r(378);
        img {
          animation-iteration-count: infinite;
          width: 100vw;
        }
      }
    }
    #old {
      width: 100vw;
      height: 100vh;
      background: url("../images/classic/bg.jpg") no-repeat;
      background-size: cover;
      .dd {
        position: absolute;
        top: 0;
        right: 0;
        img {
          width: 100%;
        }
      }
      .laba {
        position: relative;
        img {
          position: absolute;
          top: r(380);
          height: r(330);
          animation-iteration-count: infinite;
          &:first-child {
            left: r(41);
          }
          &:last-child {
            right: r(26);
          }
        }
      }
      .ns {
        position: absolute;
        top: r(90);
        left: r(56);
        img {
          height: r(707);
        }
      }
    }
    #pop {
      width: 100vw;
      height: 100vh;
      background: url(../images/pop/bg.jpg) no-repeat;
      background-size: cover;
      .yj {
        position: absolute;
        top: r(23);
        left: r(15);
        img {
          width: r(500);
          animation-iteration-count: infinite;
          animation-delay:2s;
        }
      }
      .qh {
        img {
          position: absolute;
          &:first-child {
            width: r(724);
            top: r(327);
            right: 0;
          }
          &:last-child {
            position: absolute;
            top: r(138);
            right: 0;
            height: r(653);
          }
        }
      }
    }
  }
}
#resul {
  // display: none;
  background: url("../images/resul/bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  .top {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: r(16);
    padding-left: r(18);
    padding-right: r(18);
    vertical-align: t;
    display: flex;
    justify-content: space-between;
    .user {
      width: r(290);
      height: r(108);
      background: url("../images/resul/user.png") no-repeat;
      background-size: cover;
      .tx {
        position: absolute;
        width: r(74);
        height: r(74);
        top: r(31);
        left: r(36);
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        line-height: r(74);
        img {
          width: 100%;
        }
      }
      p {
        position: absolute;
        top: r(50);
        left: r(150);
        font-size: r(30);
        font-weight: bold;
      }
    }
    .logo {
      width: r(258);
      img {
        width: 100%;
      }
    }
  }
  .prize {
    position: absolute;
    top: r(114);
    left: r(267);
    width: r(231);
    height: r(280);
    img {
      height: 100%;
      width: 100%;
    }
  }
  .guess {
    position: absolute;
    top: r(392);
    left: r(250);
    p {
      font-size: r(52);
      width: r(330);
      height: r(100);
      text-align: center;
      padding-right: r(30);
      line-height: r(110);
      background: url("../images/resul/info.png") no-repeat;
      background-size: cover;
    }
  }
  .info {
    width: 100%;
    position: absolute;
    top: r(495);
    padding-left: r(20);
    padding-right: r(20);
    p {
      padding-left: r(50);
      padding-top: r(33);
      padding-bottom: r(54);
      font-size: r(32);
      line-height: r(57);
      text-align: center;
      padding-right: r(30);
      background: url("../images/resul/text.png") no-repeat;
      background-size: cover;
    }
  }
  .share {
    width: 100%;
    padding-left: r(30);
    padding-right: r(30);
    position: absolute;
    top: r(708);
    display: flex;
    justify-content: space-between;
    img {
      width: r(305);
      animation-delay: 4s;
    }
  }
  .pm {
    width: r(679);
    margin-left: r(30);
    margin-right: r(30);
    position: absolute;
    bottom: r(20);
    height: r(349);
    background: url("../images/resul/rank.png") no-repeat;
    background-size: cover;
  }
}
